<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c1" width="600" height="400">
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>

    <script>
        /** @type {HTMLCanvasElement} **/
        var c1 = document.getElementById("c1");
        var ctx = c1.getContext("2d");

        let index = 0
        function render() {
            ctx.clearRect(0,0,600,400);
            index += 1;
            if (index>15)index=0;
            ctx.moveTo(200, 150);
            ctx.lineTo(500, 400);
            ctx.lineTo(400, 150);

            //设置线条宽度
            ctx.lineWidth = 2;

            //设置线条端点样式
            //ctx.lineCap ="butt"
            ctx.lineCap = "round"
            // ctx.lineCap ="square"

            //设置连接处样式
            ctx.lineJoin = "round" //"bevel"  "miter" 

            //设置虚线
            ctx.setLineDash([10, 5])
            ctx.lineDashOffset = index
            ctx.stroke();
            requestAnimationFrame(render);
        }
        requestAnimationFrame(render);

    </script>
</body>
</html>